<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-02-03 11:22:36
 * @LastEditors:
 * @LastEditTime: 2021-04-01 16:19:43
 * @Description:
-->
<template>
  <el-carousel height="43px" class="notice-carousel" direction="vertical" :autoplay="true">
    <el-carousel-item v-for="item in list" :key="item.id">
      <div class="notice-box" @click="toNoticeInfo(item.id)">
        <img src="../../assets/home/tip@2x.png" alt="">
        <p class="text-ellipsis">
          {{ item.title }}
        </p>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 公告详情页面
    toNoticeInfo(id) {
      const vm = this
      vm.$router.push({ path: `/system/notice/info/${id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-carousel {
  margin: 20px 30px 14px 30px;
}
.notice-box {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  color: #333333;
  &:hover {
    color: #39A0FF;
  }
  img {
    width: 20px;
    height: 17px;
  }
  p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    margin-left: 10px;
  }
}
</style>
